<template>
  <div class="mapContainer" ref="map">
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 获取DOM元素
let map = ref()
// 引入中国地图的JSON数据
import chinaJson from './china.json'
// 注册中国地图
echarts.registerMap('china', chinaJson as any)

// 组件加载完成后渲染地图
onMounted(() => {
  let mychart = echarts.init(map.value)
  // 设置配置项
  mychart.setOption({
    // 地图组件
    geo: [{
      map: 'china',
      // roam: true, // 鼠标的缩放效果
      // 地图位置的调试
      left: 30,
      top: 100,
      right: 10,
      bottom: 0,
      label: {
        show: true,
        color: 'white',
        fontSize: 14,
      },
      itemStyle: {
        // 每个图形的样式
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
          }, {
            offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        opacity: 0.8
      },
      // 高亮状态下的多边形和标签样式
      emphasis: {
        label: {
          fontSize: 30,
        },
        itemStyle: {
          color: 'orange'
        }
      }

    }],
    // 这个调整完，没有变化
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 航线
    series: [{
      type: 'lines',
      // polyline: true, // 是否是多条段线
      data: [
        // 从北京到海口
        {
          coords: [
            [116, 39],  // 起点
            [110, 19],   // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: 'skyblue',
            type: 'dotted',
            width: 5,
            curveness: 0.1
          }
        },
        // 从北京到西藏拉萨
        {
          coords: [
            [116, 39],  // 起点
            // [91, 29],   // 终点
            [87, 43]
          ],
          // 统一的样式设置
          lineStyle: {
            color: 'white',
            type: 'dotted',
            width: 5,
            curveness: 0.2
          }
        },

        // 从成都到上海
        {
          coords: [
            [91, 29],  // 起点
            [121, 31],   // 终点
          ],
          // 统一的样式设置
          lineStyle: {
            color: 'white',
            type: 'dotted',
            width: 5,
            curveness: 0.2
          }
        },
      ],
      // 动画特效的配置
      effect: {
        show: true, // 是否展示特效
        period: 5, // 特效动画时长
        symbol: 'path://M700.065799 373.027761q116.507301 104.243374 209.508743 189.068865 39.857761 35.769785 77.671534 71.028574t67.451595 63.36362 47.522715 47.011718 17.884893 21.972868l0 61.319632q0 4.087975-17.884893-1.532991t-47.522715-17.373896-67.451595-27.593834-77.671534-33.214801q-93.001442-40.879755-209.508743-95.04543l0 193.156841q26.571841 19.417883 50.077699 37.813773 20.439877 15.329908 40.879755 30.148819t31.68181 22.994862q13.28592 9.197945 15.329908 18.906887t2.043988 22.994862l0 34.747791q0 8.175951-16.862899 10.730936t-40.368758-8.686948q-11.241933-6.131963-40.879755-18.39589t-63.36362-26.571841-64.896611-26.571841-46.500721-18.39589q-2.043988 0-3.576979-0.510997t-3.576979-0.510997-3.576979 0.510997-3.576979 0.510997q-15.329908 6.131963-46.500721 18.39589t-64.896611 26.571841-63.36362 26.571841-40.879755 18.39589q-23.505859 11.241933-40.368758 8.686948t-16.862899-10.730936l0-34.747791q0-13.28592 2.043988-22.994862t15.329908-18.906887q11.241933-8.175951 31.68181-22.994862t40.879755-30.148819q23.505859-18.39589 50.077699-37.813773l0-193.156841q-117.529295 54.165675-210.530737 95.04543-39.857761 17.373896-77.160537 33.214801t-66.940598 27.593834-47.522715 17.373896-17.884893 1.532991l0-61.319632q0-3.065982 17.884893-21.972868t47.522715-47.011718 66.940598-63.36362 77.160537-71.028574q93.001442-84.825491 210.530737-189.068865l0-231.992608q0-34.747791 10.219939-58.764647t25.549847-39.346764 33.214801-23.505859 33.725798-12.263926 26.060844-4.598972 11.241933-0.510997l10.219939 0q11.241933 1.021994 27.082837 5.109969t33.725798 12.263926 33.214801 23.505859 25.549847 39.346764 10.219939 58.764647l0 231.992608z', // 特效的标识，这里为飞机svg代码
        symbolSize: 30,  // 特效的大小
        trailLength: 0,  // 特效的拖尾效果,范围0-1
        color: 'skyblue'
      }
    }]
  })
})
</script>
<style scoped>
.mapContainer {
  /* background: skyblue; */
}
</style>